<template>
  <div class="footer">
      <div class="footer_top">
          <dl>
              <dt>客户服务</dt>
              <dd>
                  <i class="iconfont icon-message"></i>
                  <!-- <van-icon name="wechat" @mouseover="yr" @mouseleave="yc" v-bind:color=active />  -->
                  在线客服 
              </dd>
              <dd>
                  <i class="iconfont icon-bangzhu"></i>
                  <!-- <van-icon name="wechat" /> -->
                  问题反馈
              </dd>
          </dl>
          <dl>
              <dt>关注我们</dt>
              <dd>
                  <i class="iconfont icon-weixin"></i>
                  <!-- <van-icon name="wechat" /> -->
                  公众号 
              </dd>
              <dd>
                  <i class="iconfont icon-xinlangweibo"></i>
                  <!-- <van-icon name="wechat" /> -->
                  微博
              </dd>
          </dl>
          <dl>
              <dt>下载APP</dt>
              <dd>
                  <img src="https://erabbit-test.itheima.net/img/qrcode.5372a064.jpg" alt="">
              </dd>
              <dd class="three">
                  <span>扫描二维码</span>
                  <span>立马下载APP</span>
                  <a href="javascript">下载页面</a>
              </dd>
          </dl>
          <dl>
              <dt>服务热线</dt>
              <dd class="phone">
                  400-0000-000 
                  <p>周一至周日 8:00-18:00</p>
              </dd>
          </dl>
      </div>
      <div class="footer_bottom">
          <div class="container">
              <div class="slogan">
                  <a href="">
                      <van-icon name="thumb-circle-o" />
                      <span>价格亲民</span>
                  </a>
                  <a href="">
                      <van-icon name="thumb-circle-o" />
                      <span>物流快捷</span>
                  </a>
                  <a href="">
                      <van-icon name="thumb-circle-o" />
                      <span>品质新鲜</span>
                  </a>
              </div>
              <div class="copyright">
                  <p>
                      <a href="javascript:;">关于我们</a>
                      <a href="javascript:;">帮助中心</a>
                      <a href="javascript:;">售后服务</a>
                      <a href="javascript:;">配送与验收</a>
                      <a href="javascript:;">商务合作</a>
                      <a href="javascript:;">搜索推荐</a>
                      <a href="javascript:;">友情链接</a>
                  </p>
                  <p>CopyRight © 小兔鲜儿</p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    import "../assets/css/bottom.css";

export default {
    data() {
        return {
            active:""
        }
    },
    methods:{
        yr(){
            this.active='#27ba9b'
            
        },
        yc(){
            this.active =''
        }
    }
}
</script>
<style lang="less" scoped>
        .iconfont.icon-message:hover{
            color:blue
        }
    .footer{
        .footer_top{
            padding: 60px 0 40px 25px;
            display: flex;
            width:1240px;
            margin:auto;
            :first-child{
                padding-left: 0 
            }
            dl{
                height: 190px;
                text-align: center;
                padding: 0 58px;
                border-right: 1px solid #f2f2f2;
                color: #999;
                img{
                    max-width: 100%;
                    max-height: 100%;
                    vertical-align: middle;
                    margin-top: -6px
                }
            }
            dt{
                line-height: 1;
                font-size: 18px;
                // text-align: center;
            }
            dd{
                margin: 36px 12px 0 0;
                float: left;
                width: 92px;
                height: 92px;
                padding-top: 10px;
                border: 1px solid #ededed;
                font-size:14px;
                text-align: center;
                i{
                    font-size: 36px;
                    display: block;
                   
                }
            }
            .three{
                    padding-top: 5px;
                    font-size: 14px;
                    width: auto;
                    height: auto;
                    border: none;
                span{
                    display: block;
                }
                a{
                   display: block;
                    line-height: 1;
                    padding: 10px 25px;
                    margin-top: 5px;
                    color: #fff;
                    border-radius: 2px;
                    background-color: #27ba9b;
                }
            }
            .phone{
                border: none;
                padding-top: 20px;
                font-size: 22px;
                color: #666;
                width: auto;
                height: auto;
                p{
                    display: block;
                    font-size: 15px;
                    color: #999;
                }
            }
        }
        .footer_bottom{
            background-color: #333;
            .container {
                width: 1240px;
                margin: 0 auto;
                position: relative;
                .slogan{
                    height: 178px;
                    line-height: 58px;
                    padding: 60px 100px;
                    border-bottom: 1px solid #434343;
                    display: flex;
                    justify-content: space-between;
                    a{
                        height: 58px;
                        line-height: 58px;
                        color: #fff;
                        font-size: 28px;
                        i{
                            font-size: 50px;
                            vertical-align: middle;
                            margin-right: 10px;
                            font-weight: 100;
                        }
                        span{
                            vertical-align: middle;
                            text-shadow: 0 0 1px #333
                        }
                    }
                }
                .copyright{
                    height: 170px;
                    padding-top: 40px;
                    text-align: center;
                    color: #999;
                    font-size: 15px;
                   
                    p{
                        line-height: 1;
                        margin-bottom: 20px;
                        display: flex;
                        justify-content: center;
                        :last-child{
                            border-right:none;
                        }
                        a{
                            color: #999;
                            line-height: 1;
                            padding: 0 10px;
                            border-right: 1px solid #999;
                        }
                    }
                }
            }
        }
    }
</style>